<template>
  <h3>customRef节流</h3>
  <div>在一定时间范围内，用户触发多次只会执行一次以达到防止用户频繁操作的目的。</div>
  <!-- <button @click="count">点击发送请求</button> -->
  <input type="text" v-model="count" />
  <div>这是请求次数------------- {{ text }}</div>
</template>
<script setup lang="ts">
import { ref, customRef } from 'vue'
let text = ref(0)

const ajax = () => {
  text.value++
}

// data 为创建时的数据
// delay 为节流时间
function throttleRef(data: any, delay = 300) {
  // 创建定时器
  let timer: any = null
  // 对 delay 进行判断，如果传递的是 null 则不需要使用 节流方案，直接返回使用 ref 创建的。
  return delay == null
    ? // 返回 ref 创建的
      ref(data)
    : // customRef 中会返回两个函数参数。一个是：track 在获取数据时收集依赖的；一个是：trigger 在修改数据时进行通知派发更新的。
      customRef((track: any, trigger: any) => {
        return {
          get() {
            // 收集依赖
            track()
            // 返回当前数据的值
            return data
          },
          set(value) {
            // 判断
            if (timer == null) {
              // 创建定时器
              timer = setTimeout(() => {
                ajax()
                // 修改数据
                data = value
                // 派发更新
                trigger()
                // 清除定时器
                clearTimeout(timer)
                timer = null
              }, delay)
            }
          }
        }
      })
}

const count = throttleRef(text.value, 1000)
</script>
<style scoped lang="scss"></style>
